<template>
	<div>
		<van-cell-group>
			<van-nav-bar title="账号安全" left-arrow @click-left="back"/>
            <van-cell title="修改密码" clickable @click="showUpdatePwd" >
                <van-icon slot="right-icon" name="arrow" class="lh-20"  />
            </van-cell>
            <van-cell title="更改手机号" clickable @click="showBindPhone" >
                <van-icon slot="right-icon" name="arrow" class="lh-20" />
            </van-cell>
		</van-cell-group>
        <van-popup v-model="updatePwd" position="right" class="v-full" :overlay="false">
            <UpdatePwd ref="updatePwd" :popup="true" :callback="closeUpdatePwd"></UpdatePwd>
        </van-popup>
        <van-popup v-model="bindPhone" position="right" class="v-full" :overlay="false">
            <BindPhone ref="bindPhone" :popup="true" :callback="closeBindPhone"></BindPhone>
        </van-popup>
	</div>
</template>
<script>
import { Cell, CellGroup,NavBar,Icon,Popup} from 'vant';

import UpdatePwd from 'touch/components/home/ucenter/account/update-pwd';
import BindPhone from 'touch/components/home/ucenter/account/bind-phone';


export default {
	props: {
        callback:{
            type: Function,
        },
        popup :{
        	type : Boolean,
        	default : false
        }
    },
    components: {
    	[Cell.name] : Cell,
    	[CellGroup.name] : CellGroup,
    	[NavBar.name] : NavBar,
    	[Popup.name] : Popup,
        [Icon.name] : Icon,
        UpdatePwd,
        BindPhone,
    },
    data () {
        return {
            updatePwd : false,
            bindPhone : false,
        }
    },
    methods :{
        back(){
        	if (this.popup) {
        		this.callback();
        	}else{
        		window.history.go(-1);
        	}
        },
        closeUpdatePwd:function(){
        	this.updatePwd = false;
        },
        closeBindPhone:function(){
            this.bindPhone = false;
        },
        showBindPhone:function(){
            this.bindPhone=true;
            this.$nextTick(function () {
                this.$refs.bindPhone.init();
            });
        },
        showUpdatePwd:function(){
            this.updatePwd = true;
             this.$nextTick(function () {
                this.$refs.updatePwd.init();
            });
        }
    },
}
</script>
<style>
	.cell-headimg{width: 20px;height: 20px;border-radius: 50%;}
	.lh-20{line-height: 20px;}
</style>